<template>
  <div>
    <a-card :bordered="false">
      <label>关键词：<input v-model="addressKeyword"></label>
      <baidu-map class="bm-view" center="北京" :scroll-wheel-zoom="true" :zoom="zoom" @click="mapClick" ak="otaLwqR7gtHsvICDHDGl3EucbgRLvE6411">
        <bm-view class="map" style="width: 100%; height:300px; flex: 1"></bm-view>
        <bm-local-search :keyword="addressKeyword" :auto-viewport="true" :location="location"></bm-local-search>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="false"></bm-marker>
      </baidu-map>
      <baidu-map
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        style="height:400px"
        center="北京"
        @click="getClickInfo"
        @ready="handler"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="false"></bm-marker>
      </baidu-map>
      <baidu-map :center="center" :zoom="zoom" @ready="handler" style="width:100%;height:500px" @click="getClickInfo" :scroll-wheel-zoom='true'>
      </baidu-map>
    </a-card>
  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
  import BmView from 'vue-baidu-map/components/map/MapView.vue'
  import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
  import {STable} from '@/components'
  import edit from './brandEdit'
  import {optionselect} from '@/api/mini/miniMenu'
  import {selectPage, del} from '@/api/merchant/brand'

  /**
   * 组件
   */
  const components = {STable, edit, BaiduMap,BmView,BmLocalSearch,BmMarker}

  const columns = [
    {
      title: '品牌分类',
      dataIndex: 'name'
    },
    {
      title: '排序',
      dataIndex: 'sortNo'
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 180,
      scopedSlots: {
        customRender: 'action'
      }
    }
  ]

  const statusMap = {
    false: {
      status: '#108ee9',
      text: '启用'
    },
    true: {
      status: '#f50',
      text: '禁用'
    }
  }

  /**
   * 数据
   */
  const data = function() {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13,
      storeLocation:{},
      location: '',
      keyword: '',
      zoom: 12.8,
      addressKeyword: "",
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      columns,
      editProps: [],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return selectPage(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      }
    }
  }

  const created = function () {
    optionselect().then(res => {
      if (res.code === 200) {
        this.editProps = res.data
      }
    })
  }

  /**
   * 过滤器
   */
  const filters = {
    statusFilter (status) {
      return statusMap[status].text
    },
    statusColorFilter (status) {
      return statusMap[status].status
    },
  }

  /**
   * 计算属性
   */
  const computed = {}

  /**
   * 侦听器
   */
  const watch = {}

  export default {
    data: data,
    components: components,
    created: created,
    filters: filters,
    computed: computed,
    watch: watch,
    /**
     * 方法
     */
    methods: {
      handler ({BMap, map}) {
        // 初始化地图,设置中心点坐标
        var point = new BMap.Point(119.8025089500, 25.4890556400)
        map.centerAndZoom(point, 13)

        // 添加鼠标滚动缩放
        map.enableScrollWheelZoom();
        // 添加缩略图控件
        map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
        // 添加缩放平移控件
        map.addControl(new BMap.NavigationControl());
        //添加比例尺控件
        map.addControl(new BMap.ScaleControl());
        //添加地图类型控件
        //map.addControl(new BMap.MapTypeControl());

        //设置标注的图标
        var icon = new BMap.Icon("./static/img/map.png",new BMap.Size(100,100));
        //设置标注的经纬度
        var marker = new BMap.Marker(new BMap.Point(121.160724,31.173277),{icon:icon});
        //把标注添加到地图上
        map.addOverlay(marker);
        var content = "<table>";
        content = content + "<tr><td> 编号：001</td></tr>";
        content = content + "<tr><td> 地点：上海汉得信息技术股份有限公司</td></tr>";
        content = content + "<tr><td> 时间：2018-1-3</td></tr>";
        content += "</table>";
        var infowindow = new BMap.InfoWindow(content);
        // 图标点击的时候显示标注
        marker.addEventListener("click",function(){
          this.openInfoWindow(infowindow);
        });
        // 标注默认显示
        // var infoWindow = new BMap.InfoWindow(content) // 创建信息窗口对象
        // map.openInfoWindow(infoWindow, point)
      },
      getClickInfo (e) {
        console.log(e.point.lng)
        console.log(e.point.lat)
        this.center.lng = e.point.lng
        this.center.lat = e.point.lat
      },
      show(record) {
        this.visible = true;
        Object.assign(this.model, record);
        this.center.lng = record.lng;
        this.center.lat = record.lat;
        this.zoom = 15;
        this.$nextTick(() => {
          console.log(JSON.stringify(record))
        });

      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;

        let point = new BMap.Point(this.center.lng, this.center.lat);
        let coder = new BMap.Geocoder();
        coder.getLocation(point,result => {
          this.storeLocation = {
            lng: point.lng,
            lat: point.lat,
            address: result.address
          }
          console.log("address="+result.address)
          console.log("storeLocation="+JSON.stringify(this.storeLocation));
          this.$emit('getStoreLocation', this.storeLocation);
          this.close();
        });

      },

      handleCancel () {
        this.close()
      },

      //地图
      handler({ BMap, map }) {
        console.log(BMap, map);
        map.centerAndZoom(new BMap.Point(this.model.lng,this.model.lat), 15);
      },
      // getClickInfo(e) {
      //   console.log(e.point.lng)
      //   console.log(e.point.lat)
      //   this.center.lng = e.point.lng
      //   this.center.lat = e.point.lat
      // },
      syncCenterAndZoom (e) {
        const {lng, lat} = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
      },
      mapClick(e){
        console.log(e)
        this.lng = e.point.lng;
        this.lat = e.point.lat;
        //console.log(BaiduMap)
        //BaiduMap.point(this.lng, this.lat)
        //BaiduMap.setCenter(point); // 设置地图中心点
        // 防止dom还未渲染
        this.center.lng = e.point.lng
        this.center.lat = e.point.lat
      },
      handleAdd() {
        this.$refs.createModal.add()
      },
      handleEdit(record) {
        this.$refs.createModal.edit(record)
      },
      refresh(){
        this.$refs.table.refresh()
      },
      handleDel (record) {
        const _this = this
        this.$confirm({
          title: '警告',
          content: `真的要删除 ${record.name} 吗?`,
          okText: '删除',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            // 在这里调用删除接口
            del(record.id).then(res => {
              if (res.code === 200) {
                _this.$message.success(res.message)
                _this.$refs.table.refresh()
              }
              if (res.code === 500) {
                _this.$message.error(res.message)
              }
            })
          }
        })
      },
      filterOption (input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    }
  }
</script>

<style scoped>
  .bm-view {
    width: 100%;
    height: 300px;
  }
  /* 地图标注圆角显示 */
  .BMap_bubble_title{
    color:black;
    font-size:13px;
    font-weight: bold;
    text-align:left;
  }
  .BMap_pop div:nth-child(1){
    border-radius:7px 0 0 0;
  }
  .BMap_pop div:nth-child(3){
    border-radius:0 7px 0 0;background:#ABABAB;;
    /*background: #ABABAB;*/
    width:23px;
    width:0px;
    height:10px;
  }
  .BMap_pop div:nth-child(3) div{
    border-radius:7px;
  }
  .BMap_pop div:nth-child(5){
    border-radius:0 0 0 7px;
  }
  .BMap_pop div:nth-child(5) div{
    border-radius:7px;
  }
  .BMap_pop div:nth-child(7){
    border-radius:0 0 7px 0 ;
  }
  .BMap_pop div:nth-child div(7) {
    border-radius:7px ;
  }
     .BMap_pop>img {
       display: none;
     }
</style>
